Configuring RGraph SVG Javascript Charts
Description
Understanding the Pattern Used for RGraph Chart Javascript
All of the sample charts insert Javascript that follows the same pattern.
var _settings = function() {
//function that returns an RGraph settings object
}
var _chart = new RGraph.SVG.Bar(_settings()).draw()
{dialog.object}._jsCharts['{chartName}'] = {};
{dialog.object}._jsCharts['{chartName}'].settings = [_settings];
{dialog.object}._jsCharts['{chartName}'].object = [_chart];Depending the RGraph chart type (e.g. Pie, Line, Bar, etc.), the appropriate RGraph function is called to render the chart.
A settings object is passed to the RGraph function. This settings object is created by calling the _settings() function.
You do not need to include the RGraph charting Javascript libraries yourself in your UX component. The libraries are automatically loaded by Alpha Anywhere.
The Chart settings are stored in the _jsCharts object in the UX component object. These settings are stored to enable the chart to be refreshed with new data, to be changed on the fly by changing any of the chart properties, or to be dynamically resized. Notice that the settings object and the object object are arrays. This is because a chart can actually be composed of multiple charts each drawn on the same DIV.
The Javascript for the chart uses two special placeholders:
- Placeholder
- Description
- {chartDiv}
The id of the div where the chart will be rendered.
- {chartName}
The name of the chart. This resolves to the Chart Id shown in the Javascript Chart property sheet.
Using Real Data in an RGraph SVG Chart
When you select a Sample Chart, the Javascript that is inserted into the Javascript window in the Javascript Chart builder uses static data. This is fine initially when you are designing a chart, but at some point you will want to replace the static sample data with 'real' data.
The source of this 'real' data must be client-side data. For example, it might be data from a column in a List control. You will need to create a Javascript function that gets the data from the List and then set the data property in the Chart settings to the this function.
In many cases the 'real' data will be data that you want to get by querying a database, calling a service (REST, SOAP, etc.), or running some custom server-side code. In the case where the data you want to use in your chart originates on the server, you will need to define a Data Series that retrieves the necessary data. (When you define the Data Series you will need to specify that the Data Series data should be 'published' to the client-side.)
For example, here are the settings for a simple bar chart that uses static sample data:
var _settings = function() {
var settings = {
id: '{chartDiv}',
data: [8,5,9,3,5,2,4],
options: {
gutterTop: 50,
hmargin: 20,
xaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
tooltips: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
title: 'A basic Bar chart',
titleSubtitle: 'A chart showing daily values for a week',
titleSubtitleItalic: true,
colors: ['#7e9cf6'],
shadow: true,
shadowOpacity: 0.2,
attribution: false
}
};
return settings;
}
var _chart = new RGraph.SVG.Bar(_settings()).draw();Notice that the chart data is defined by the data property in the settings object.
Say we have a Javascript function that returns an array of values and we want to use the data returned by this function in the Chart. For example, the function that return an array of values could be defined as follows:
function getData() {
return [1,2,3,4,5,6,7];
}To base the Javascript Chart on the data returned by this function, we simply change the data property in the Chart settings to:
....
id: '{chartDiv}',
data: getData(),
options: {....In the case where the data comes from a column in a List control, the Javascript function that gets the data would be something like this (assuming that the column in the List that contains the data is called 'Sales'):
function getData() {
var lObj = {dialog.object}.getControl('myList');
var _d = lObj._data //get list data
var _a = ; //make empty array
for(var i = 0; i < _d.length; i++) {
_a.push(_d[i].Sales); //push data from the 'Sales' column onto the array
};
return _a;
}If the data you want to use in your chart originates server-side, then you will need to create a Data Series. Assume you have created a Data Series called Sales, with two sub-series, Amount and Month.
The data in the Sales Data Series might look something like this:
| Month | Amount |
|---|---|
| Jan | 200 |
| Feb | 220 |
| Mar | 190 |
| Apr | 250 |
| May | 270 |
| Jun | 210 |
| Jul | 300 |
| Aug | 320 |
| Sep | 290 |
| Oct | 330 |
| Nov | 300 |
| Dec | 350 |
You can reference data from Amount column in the above Data Series using this syntax:
{dialog.object}._dataSeriesData.Sales.AmountUsing this syntax, you could change the settings object for the example bar chart to:
var _settings = function() {
var settings = {
id: '{chartDiv}',
data: {dialog.object}._dataSeriesData.Sales.Amount,
options: {
gutterTop: 50,
hmargin: 20,
xaxisLabels: {dialog.object}._dataSeriesData.Sales.Month,
tooltips: {dialog.object}._dataSeriesData.Sales.Month,
title: 'A basic Bar chart',
titleSubtitle: 'A chart showing sales by month',
titleSubtitleItalic: true,
colors: ['#7e9cf6'],
shadow: true,
shadowOpacity: 0.2,
attribution: false
}
};
return settings;
}
var _chart = new RGraph.SVG.Bar(_settings()).draw();Notice that the chart data, X axis labels and tooltips are all based on Data Series data.
Computing RGraph Chart Properties Dynamically
In the above examples, the Chart's data property is set to the result of a Javascript function call (first example), or to the value in a Data Series (second example). However, it is not just the Chart's data that can be dynamic. Any property in the Chart settings can be set to a Javascript function or Data Series value.
For example, in the above example, the RGraph Chart Title is defined using the titleSubtitle setting:
titleSubtitle: 'A chart showing sales by month'
You could change this code to compute the titleSubtitle dynamically with a function call:
titleSubtitle: getChartTitle()
Working in the Javascript Chart Builder
When you are working in the Javascript Chart builder, the dialog has these buttons and hyperlinks.
The purpose of each of these tools is:
- Tool
- Action
- Select Sample Chart
Opens a window showing sample charts. You can select a chart and the Javascript for the selected chart will be entered into the builder.
- Preview Chart
Previews the chart in the bottom half of the window.
- Define Chart CSS
In some cases your Chart settings will use CSS classes for some aspect of the Chart (for example, formatting tooltips). You can define the CSS classes here.
- Color
Allows you to insert the value of a color into the Javascript code. If you highlight an existing color in the Javascript code before you click on the Color hyperlink, the highlighted color will be shown in the color picker. The color you select will be inserted into the Chart Javascript.
- Property name
The Javascript shown in the code window after you select a Sample Chart typically only sets a small number of the available properties for the Chart. If you click the hyperlink you get a list of some of the other available properties for RGraph Charts. This list may include properties that are not appropriate for the type of chart you are designing. To read documentation about the available properties, please refer to the RGraph web site. (http://RGraph.net)
- Validate Javascript
The code you enter into the Code window in the Javascript Chart builder is Javascript. It must, of course, be valid Javascript. This hyperlink lets you validate the Javascript so you can check that you have not made any syntax errors when editing the sample code.
- Select Data Series
If you want to set the value of any property in the Chart Settings to data in a Data Series you can click this hyperlink to insert the Javascript to reference a Data Series. When you click the hyperlink, a window showing all of the available Data Series will be shown. You can define new Data Series in this window. When you select a Data Series (and sub-series if the selected Data Series has sub-series) the appropriate Javascript is entered into the code.
Setting an RGraph Chart's Background Color or Border
In some cases, you will want to set the background color or border of a chart. For example, the Chart shown below has a black background.
You can set the Chart background color and border using the Javascript Chart's Style property.
Videos
Introduction
Javascript RGraph Charts allow you to create a variety of different chart types using Javascript. Because the charts are created client-side, using Javascript, these types of charts are ideal for disconnected applications where the Chart control cannot be used (as this control type produces charts server-side).
In this video we show how to set up a basic Javascript RGraph Charts.
Binding RGraph Chart Data to a Javascript Function
The data shown in a Javascript RGraph Chart can be obtained by calling a Javascript function.
In this video show show how to bind the Chart data to a Javascript function.
Binding RGraph Chart Data to Data From a SQL Database - Using a Data Series for RGraph Chart Data
The data shown in a Javascript RGraph Chart can be obtained by querying a SQL database.
In this video show show how to bind the RGraph Chart data to data from a SQL database table by binding the Chart data to the data in a Data Series. The Data Series is populated with data from a SQL database table.
Binding RGraph Chart Properties to a Javascript Function
Any property of a chart can be made dynamic by binding the property to the result of a Javascript function.
In this video we show how properties of the RGraph Chart (in addition to the Chart data) can be made dynamic.
Action Javascript Methods for Working With Javascript RGraph Charts
Action Javascript exposes several methods for working with Javascript RGraph Charts.
In this video we show how you can use Action Javascript to resize a Javascript RGraph Chart.
Setting an RGraph Chart Property Using Action Javascript vs. Binding an RGraph Chart Property to a Javascript Function
Action Javascript allows you to dynamically change properties (such as the RGraph Chart colors, or title) after the RGraph Chart has been rendered. However, you can also achieve the same result by binding the RGraph Chart properties to Javascript functions.
In this video we contrast the two methods for setting RGraph Chart properties.
Using Action Javascript to Refresh RGraph Chart Data
Action Javascript allows you to refresh the data shown in an RGraph Chart. If the RGraph Chart data is based on a Data Series, an Ajax callback to the server will be made to refresh the data in the Data Series on which the RGraph Chart depends and then the Chart will be redrawn, showing the new data.
In this video we show how Action Scripting is used to refresh the RGraph Chart data.
In Depth Example - RGraph Chart Based on SQL Data
This example shows an RGraph pie chart populated from a multi-table SQL query against the sample Northwind database. The RGraph Chart is based on a custom Data Series to generate the Chart data. The user can select the country for which the RGraph Chart should be shown from a dropdownbox control.
In this video we show how this RGraph Chart is set up.
Understanding the Structure of the Javascript that Defines a Javascript RGraph Chart
The Javascript used to define a Javascript RGraph Chart has a well defined structure, described in this video.
Javascript RGraph Chart Events
In this example we show a RGraph Chart with a Tooltip event. After the RGraph Chart is resized, the Tooltip events must be re-registered.
See Also